<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit Place Or Experience</title>
    <!-- zui -->
    <link href="/res/zui/dist/css/zui.min.css" rel="stylesheet">
    <link href="/res/smart-wizard/dist/css/smart_wizard.css" rel="stylesheet">
    <link href="/res/smart-wizard/dist/css/smart_wizard_theme_arrows.css" rel="stylesheet">
    <style type="text/css">
        nav.navbar{
            border-radius: 0px;
        }

        .sw-theme-arrows .step-content{
            padding: 15px;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Tartisan</a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-example">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Admin</a></li>
            </ul>
        </div><!-- END .navbar-collapse -->
    </div>
</nav>
<div class="container-fluid">

    <div class="row">
        <div class="col-xs-2">
            <!-- Menu -->
            <nav class="menu" data-ride="menu" style="max-width: 240px">

                <ul class="nav nav-primary">
                    <li class="active"><a href="javascript:;"><i class="icon icon-th"></i> Menu</a></li>
                    <li><a href="javascript:;"><i class="icon icon-database"></i> Data Management</a></li>
                    <li><a href="javascript:;"><i class="icon icon-upload"></i> Import Management</a></li>
                    <li><a href="javascript:;"><i class="icon icon-off"></i> Quit</a></li>
                </ul>
            </nav>
        </div>

        <!-- Start content -->
        <div class="col-xs-10">
            <h3>Edit Place&Experience</h3>
            <hr>

            <form class="form-horizontal">
            <div id="smartwizard">
                <ul>
                    <li><a href="#step-1">Basic Info<br /><small>Edit basic info</small></a></li>
                    <li><a href="#step-2">Picture Info<br /><small>Edit picture and cover</small></a></li>
                    <li><a href="#step-3">Detail Info<br /><small>Edit detail info</small></a></li>
                </ul>

                <div>

                    <div id="step-1">

                        <div class="form-group">
                            <label for="title" class="col-sm-2">Title</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="title" name="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type" class="col-sm-2">Type</label>
                            <div class="col-sm-2">
                                <select class="form-control" name="type" id="type">
                                    <option value="1">Place</option>
                                    <option value="2">Experience</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-2">Address</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="address" name="address">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="state" class="col-sm-2">Sate</label>
                            <div class="col-sm-2">
                                <select class="form-control" name="state" id="state">
                                    <option value="1">Place</option>
                                    <option value="2">Experience</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2">Tag</label>
                            <div class="col-sm-8">
                                <label class="checkbox-inline">
                                    <input type="checkbox" name="tags"> Food
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" name="tags"> Farm&Factory
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="playDuration" class="col-sm-2">Play Time</label>
                            <div class="col-sm-1">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="playDuration" name="playDuration">
                                    <div class="input-group-addon">H</div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cost" class="col-sm-2">Cost</label>
                            <div class="col-sm-1">
                                <div class="input-group">
                                    <div class="input-group-addon">$</div>
                                    <input type="text" class="form-control" id="cost" name="cost">
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lon" class="col-sm-2">Longitude</label>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="lon" name="lon">
                                    <div class="input-group-addon">°</div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lat" class="col-sm-2">Latitude</label>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="lat" name="lat">
                                    <div class="input-group-addon">°</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phoneNo" class="col-sm-2">Phone No</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="phoneNo" name="phoneNo">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="website" class="col-sm-2">Website</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="website" name="website">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2">Email</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="email" name="email">
                            </div>
                        </div>

                    </div>
                    <div id="step-2" class="">
                        <div style="text-align: right;">
                            <button type="button" class="btn btn-primary btn-lg "><i class="icon icon-cloud-upload"></i> Upload</button>
                        </div>
                        <hr>
                        <div class="cards">
                           <div class="col-sm-3" style="text-align: center;">
                               <div style="margin-bottom: 5px;">
                                   <input type="radio" name="cover" value=""> Cover
                               </div>
                               <img src="demo.png" alt="">
                               <div style="margin-top: 5px;">
                                   <button class="btn btn-danger btn-sm"><i class="icon icon-times"></i> Delete</button>
                               </div>
                           </div>
                            <div class="col-sm-3" style="text-align: center;">
                                <div style="margin-bottom: 5px;">
                                    <input type="radio" name="cover" value=""> Cover
                                </div>
                                <img src="demo.png" alt="">
                                <div style="margin-top: 5px;">
                                    <button class="btn btn-danger btn-sm"><i class="icon icon-times"></i> Delete</button>
                                </div>
                            </div>
                       </div>
                    </div>
                    <div id="step-3" class="">
                        <div class="form-group">
                            <label for="time" class="col-sm-1"><i class="icon icon-time" style="font-size: 18px;"></i></label>
                            <div class="col-sm-2" style="width: 150px;">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="time" name="time">
                                    <div class="input-group-addon">hour total</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="groupSize" class="col-sm-1"><i class="icon icon-group" style="font-size: 18px;"></i></label>
                            <div class="col-sm-2" style="width: 280px;">
                                <div class="input-group">
                                    <div class="input-group-addon">Group size up to</div>
                                    <input type="text" class="form-control" id="groupSize" name="groupSize">
                                    <div class="input-group-addon">traveller</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="language" class="col-sm-1"><i class="icon icon-comments" style="font-size: 18px;"></i></label>
                            <div class="col-sm-2" style="width: 200px;">
                                <div class="input-group">
                                    <div class="input-group-addon">Offered in</div>
                                    <input type="text" class="form-control" id="language" name="language">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="language" class="col-sm-1"><i class="icon icon-plane" style="font-size: 18px;"></i></label>
                            <div class="col-sm-2" style="width: 200px;">
                                <div class="input-group">
                                    <div class="input-group-addon">Transport By</div>
                                    <input type="text" class="form-control" id="language" name="language">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-1">
                                <button class="btn"><i class="icon icon-plus"></i></button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-3">
                                <input type="text" class="form-control">
                            </div>
                            <div class="col-sm-1">
                                <button class="btn btn-danger"><i class="icon icon-minus"></i></button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-3">
                                <input type="text" class="form-control">
                            </div>
                            <div class="col-sm-1">
                                <button class="btn btn-danger"><i class="icon icon-minus"></i></button>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            </form>
        </div>
        <!-- End content -->

    </div>
</div>

<script src="/res/jquery/jquery.js"></script>
<script src="/res/zui/dist/js/zui.min.js"></script>
<script type="text/javascript" src="/res/smart-wizard/dist/js/jquery.smartWizard.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#smartwizard').smartWizard({
            theme:'arrows'
        });
    });
</script>
</body>
</html>